<template>
	<view class="custom_tabs_radius">
		<view class="tab_box">
			<view v-for="(item,index) in tabsList" 
			:key="index" 
			:class="['tab_item',activeIndex==index?'tab_active':'tab_notactive',activeIndex-1==index?'tab_prevactive':'']"
			@click="onChangeTab(item,index)">
				<text class="tab_txt" 
					:class="{badge: item.badge != undefined && item.badge != '' && item.badge != 0}"
					:data-badge="item.badge">
					{{item.title}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @Author: NXJ
	 * @property {Number,String} active 组件的选中值，
	 * @property {String} activeColor 组件的选中颜色，
	 * @property {String} styleColor 组件的主题色，
	 * @property {Array<Object>} tabs = [{title,badge}] 边框类型
	 * 	@title tabs的文字内容
	 * 	@badge tabs右上角的角标内容
	 */
export default {
		name: 'CustomTabsRadius',
		props: {
			active: {
				type: [Number,String],
				default: 0
			},
			tabs: {
				type: Array,
				default: [],
			},
			activeColor: {
				type: String,
				default: '#F2F2F2',
			},
			styleColor: {
				type: String,
				default: '#185AFF',
			}
		},
		data() {
			return {
				activeIndex: this.active,
				tabsList: this.tabs
			};
		},
		watch: {
			active(newVal){
				this.activeIndex = newVal
			},
			tabs(newTabs){
				this.tabsList = newTabs
			},
			activeColor(newColor){
				
			},
			styleColor(newColor){
				
			}
		},
		methods:{
			onChangeTab(item,index){
				this.activeIndex = index
				this.$emit('change',{...item,index})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom_tabs_radius{
		// position: relative;
		.tab_box {
			height: 80rpx;
			display: flex;
			position: relative;
			top: 0;
		}
		.tab_box::before,.tab_box::after{
			content: '';
			display: block;
			width: 100%;
			height: 50%;
			position: absolute;
			z-index: 9;
		}
		.tab_box::before{
			background-color: #185AFF;
			top: 0;
		}
		.tab_box::after{
			background-color: #F2F2F2;
			bottom: 0;
		}
		.tab_item {
			font-size: 30upx;
			flex: 1;
			color: #FFF;
			height: 80rpx;
			background-color: #185AFF;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 10;
			.tab_txt{
				position: relative;
				&.badge::after{
					content: attr(data-badge);
					position: absolute;
					top: -16rpx;
					right: 0;
					transform: translateX(78%);
					height: 24rpx;
					line-height: 24rpx;
					padding: 2rpx 6rpx;
					font-weight: 400;
					border-radius: 14rpx 14rpx 14rpx 0;
					background-color: #e74c3c;
					color: #FFF;
					font-size: 24rpx;
					z-index: 99;
				}
			}
		}
		.tab_active {
			color: #185AFF;
			background-color: #F2F2F2;
			border-radius: 20rpx 20rpx 0 0;
		}
		.tab_active + .tab_notactive{
			border-radius: 0 0 0 20rpx;
		}
		.tab_prevactive{
			border-radius: 0 0 20rpx 0;
		}
		.tab_active:first-child{
			border-radius: 0 20rpx 0 0;
		}
		.tab_active:last-child{
			border-radius: 20rpx 0 0 0;
		}
	}
</style>
